// 申请试用 刘宝
<template>
  <el-container>
    <!-- <el-header> -->
    <!-- <img src="../../imgs/切图/登录界面/header-Navigation-top left corner-icon.png" alt=""> -->
    <!-- </el-header> -->
    <el-main>
      <el-header> </el-header>
      <el-form :model="formdata" :rules="rules" ref="formdata">
        <div>
          <h2>申请诊所试用账号</h2>
        </div>
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入手机号码"
            prefix-icon="el-icon-phone"
            v-model="formdata.phone"
          >
          </el-input>
        </el-form-item>
        <div class="yzm">
          <el-form-item prop="code" class="yzm-input">
            <el-input
              placeholder="请输入验证码"
              prefix-icon="el-icon-s-cooperation"
              v-model="formdata.code"
            >
            </el-input>
          </el-form-item>
          <el-button @click="sendCode()">发送验证码</el-button>
        </div>
        <el-form-item prop="username">
          <el-input
            placeholder="请输入联系人姓名"
            prefix-icon="el-icon-user-solid"
            v-model="formdata.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="clinicname">
          <el-input
            placeholder="请输入诊所名称"
            prefix-icon="el-icon-school"
            v-model="formdata.clinicname"
          >
          </el-input>
        </el-form-item>
        <el-button type="primary" @click="submitForm('formdata')"
          >提交</el-button
        >
        <router-link to="/login" class="route">已有账号，去登录</router-link>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { applyApi, applyCheckCode } from "../../api/apply";
import { setToken } from "../../utils/cookieUtils";
export default {
  data() {
    return {
      msg: "",
      formdata: {
        phone: "",
        code: "",
        username: "",
        clinicname: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入正确的验证码", trigger: "blur" },
        ],
        clinicname: [
          { required: true, message: "请输入诊所名称", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 发送短信验证码
    sendCode() {
      applyApi(this.formdata).then((res) => {
        alert("验证码为：" + res.data);
        // console.log(this.formdata);
        this.msg = res.data;
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.msg != this.formdata.code) {
            //   alert("注册成功");
            //   // this.$router.push("/login");
            // } else {
            alert("注册失败");
            //  location.href="/apply"
          }
          applyCheckCode(this.formdata).then((res) => {
            if (res.code == 200) {
              // setToken("token", res.data);
              // console.log(res);
              alert("注册成功");
              this.$router.push("/login");
            } else if (res.code == 101) {
              alert("该手机号已存在");
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  background-image: url("~@/imgs/切图/登录界面/beijng.png");
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  .el-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .el-form {
    background: #fff;
    box-sizing: border-box;
    width: 600px;
    height: 725px;
    padding: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /deep/.el-form-item__content {
      height: 50px;
      margin-bottom: 15px;
    }
    /deep/ h2 {
      font-size: 28px;
      text-align: left;
      font-weight: 600;
      margin-bottom: 30px;
      padding: 0;
    }
    .el-input {
      width: 360px;
      margin-bottom: 30px;
      line-height: 50px;
      /deep/.el-input__inner {
        height: 50px;
        box-sizing: border-box;
        line-height: 50px;
        display: block;
        background-color: #f0f1fd;
      }
    }
    .el-button--primary {
      display: flex;
      background-color: #666ee8;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      justify-content: center;
      align-items: center;
    }
    .yzm {
      width: 360px;
      display: flex;
      height: 50px;
      margin-bottom: 30px;
      .yzm-input {
        width: 250px;
      }
      /deep/.el-button {
        height: 50px;
        margin-left: 20px;
        background-color: #666ee8;
        color: #fff;
      }
      .el-input {
        width: 250px;
      }
    }
    .el-button {
      height: 50px;
      margin-left: 20px;
      background-color: #666ee8;
      color: #fff;
    }
    .route {
      text-decoration: none;
      margin: 0 auto;
      margin-top: 20px;
      color: #666ee8;
    }
  }
}
</style>
